<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PhotoSphereViewer - plan demo</title>

        <link rel="stylesheet" href="/dist/core/index.css" />
        <link rel="stylesheet" href="/dist/plan-plugin/index.css" />
        <link rel="stylesheet" href="/dist/markers-plugin/index.css" />
        <link rel="stylesheet" href="/node_modules/leaflet/dist/leaflet.css" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="photosphere"></div>

        <script type="importmap">
            {
                "imports": {
                    "three": "/node_modules/three/build/three.module.js",
                    "lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
                    "leaflet": "/node_modules/leaflet/dist/leaflet-src.esm.js",
                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
                    "@photo-sphere-viewer/plan-plugin": "/dist/plan-plugin/index.module.js",
                    "@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js"
                }
            }
        </script>

        <script type="module">
            import { GUI } from 'lil-gui';
            import { addColorPicker } from './scripts/LilGuiColorPicker.js';
            import { addTextarea } from './scripts/LilGuiTextarea.js';
            import { TileLayer } from 'leaflet';
            import { Viewer } from '@photo-sphere-viewer/core';
            import { PlanPlugin } from '@photo-sphere-viewer/plan-plugin';
            import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

            const viewer = new Viewer({
                container: 'photosphere',
                panorama: baseUrl + 'sphere.jpg',
                caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
                loadingImg: baseUrl + 'loader.gif',
                defaultYaw: '-10deg',
                keyboard: 'always',
                plugins: [
                    PlanPlugin.withConfig({
                        // position: 'top left',
                        // visibleOnLoad: false,
                        // size: {
                        //     width: '300px',
                        //     height: '300px',
                        // },
                        // minimizeOnHotspotClick: false,
                        defaultZoom: 14,
                        coordinates: [6.78677, 44.58241],
                        bearing: '120deg',

                        layers: [
                            {
                                name: 'OpenStreetMap',
                                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                                attribution: '&copy; OpenStreetMap',
                            },
                            {
                                name: 'OpenTopoMap',
                                layer: new TileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
                                    subdomains: ['a', 'b', 'c'],
                                    maxZoom: 17,
                                }),
                                attribution: '&copy; OpenTopoMap',
                            },
                            {
                                name: 'Google Satellite',
                                layer: new TileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
                                    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
                                }),
                                attribution: '&copy; Google',
                            },
                        ],
                        // configureLeaflet(map) {
                        //     new TileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
                        //         subdomains:['mt0','mt1','mt2','mt3'],
                        //         attribution: '&copy; Google',
                        //     }).addTo(map);
                        // },

                        // pinImage: baseUrl + 'pictos/pin-blue.png',
                        // pinSize: 25,

                        spotStyle: {
                            // size: 25,
                            // hoverSize: 30,
                            // image: baseUrl + 'pictos/pin-blue.png',
                            // hoverImage: baseUrl + 'pictos/pin-red.png',
                        },
                        buttons: {
                            // maximize: false,
                            // close: false,
                            // reset: false,
                        },

                        hotspots: [
                            {
                                coordinates: [6.792, 44.585],
                                tooltip: 'Hotspot',
                            },
                            {
                                coordinates: [6.7783, 44.58506],
                                id: 'green-lake',
                                tooltip: 'Lac vert',
                                color: 'green',
                            },
                        ],
                    }),
                    MarkersPlugin.withConfig({
                        markers: [
                            {
                                id: 'mountain',
                                tooltip: 'A mountain',
                                position: { yaw: 0.11, pitch: 0.32 },
                                image: baseUrl + 'pictos/pin-blue.png',
                                size: { width: 32, height: 32 },
                                anchor: 'bottom center',
                                data: {
                                    plan: { 
                                        coordinates: [6.79077, 44.58041],
                                        size: 25,
                                        hoverSize: 30,
                                        image: baseUrl + 'pictos/pin-blue.png',
                                        hoverImage: baseUrl + 'pictos/pin-red.png',
                                    },
                                },
                            },
                        ],
                    }),
                ],
            });

            const plan = viewer.getPlugin(PlanPlugin);

            plan.addEventListener('select-hotspot', ({ hotspotId }) => {
                console.log(`Click hotspot ${hotspotId}`);
            });

            plan.addEventListener('view-changed', ({ view }) => {
                console.log(`View size: ${view}`);

                if (view === 'maximized') {
                    plan.setZoom(16);
                    gui.hide();
                } else if (view === 'normal') {
                    plan.setZoom(14);
                    gui.show();
                } else {
                    gui.show();
                }
            });

            window.viewer = viewer;

            const config = {
                // position
                coordinates: plan.config.coordinates,
                bearing: plan.config.bearing / Math.PI * 180,

                // display
                position: plan.config.position.join(' '),
                size: plan.config.size,

                // pin
                pinImage: plan.config.pinImage,
                pinSize: plan.config.pinSize,

                // hotspot
                spotStyle: {
                    size: plan.config.spotStyle.size,
                    color: plan.config.spotStyle.color,
                    borderSize: plan.config.spotStyle.borderSize,
                    borderColor: plan.config.spotStyle.borderColor ?? plan.config.spotStyle.hoverBorderColor,
                    hoverSize: plan.config.spotStyle.hoverSize ?? plan.config.spotStyle.size,
                    hoverColor: plan.config.spotStyle.hoverColor ?? plan.config.spotStyle.color,
                    hoverBorderSize: plan.config.spotStyle.hoverBorderSize,
                    hoverBorderColor: plan.config.spotStyle.hoverBorderColor,
                },
            };

            const gui = new GUI({ title: 'Plan Plugin Options' });

            const position = gui.addFolder('Position');
            position.add(config.coordinates, 0).name('longitude');
            position.add(config.coordinates, 1).name('latitude');
            position.add(config, 'bearing', 0, 360, 1);

            const display = gui.addFolder('Display');
            display.add(config, 'position', ['top left', 'top right', 'bottom left', 'bottom right']);
            display.add(config.size, 'width').name('size.width');
            display.add(config.size, 'height').name('size.height');

            const pin = gui.addFolder('Pin');
            addTextarea(pin, config, 'pinImage', 10);
            pin.add(config, 'pinSize', 5, 100, 1);

            const hotspot = gui.addFolder('Hotstpots (spotStyle)');
            hotspot.add(config.spotStyle, 'size', 5, 50, 1);
            addColorPicker(hotspot, config.spotStyle, 'color', true);
            hotspot.add(config.spotStyle, 'borderSize', 0, 20, 1);
            addColorPicker(hotspot, config.spotStyle, 'borderColor', true);
            hotspot.add(config.spotStyle, 'hoverSize', 5, 50, 1);
            addColorPicker(hotspot, config.spotStyle, 'hoverColor', true);
            hotspot.add(config.spotStyle, 'hoverBorderSize', 0, 20, 1);
            addColorPicker(hotspot, config.spotStyle, 'hoverBorderColor', true);
            hotspot.close();

            gui.onChange(() => {
                plan.setOptions({
                    ...config,
                    bearing: config.bearing + 'deg',
                });

                document.querySelector('.lil-gui').style.right = (config.position === 'top right') ? 'auto' : '';
            });
        </script>
    </body>
</html>
